<!-- 名单批量导入功能 -->
<template>
  <div style="padding:20px;width:80%;overflow-y:auto;overflow-x:hidden;">
    <div v-if="flag">
      <badge :pdbt="12" :left="0" text="名单批量导入功能" />
      <div>
        <div v-if="step === 1">
          <div class="titleImport">1. 下载模板</div>
          <div class="titleI">请严格按照Excle模板格式添加，如您本地没有Excle模板
            <a-button style="margin-left:12px;" type="primary" icon="download" @click="onTemplate" ghost>点击下载模板</a-button>
          </div>
          <div style="margin-top:32px;" class="titleImport">2. 上传完善后的模板</div>
          <div v-if="fileList.length === 0">
            <a-upload-dragger name="file" :file-list="files" :multiple="true"
              :action="`${BASE_URL}/files/batchAddStudents`" :before-upload="beforeUpload">
              <p class="ant-upload-drag-icon">
                <a-icon style="color:#C0C4CC;" type="cloud-upload" />
              </p>
              <p class="ant-upload-text contentss">
                将文件拖到此处，或
                <span style="color:#5284FE;">点击上传</span>
              </p>
            </a-upload-dragger>
          </div>
          <div v-else class="xu_border" style="margin-top:12px;">
            <img src="../../assets/img/icon_excel.png" alt />
            <div class="name">{{ this.fileList[0].name }}</div>
            <a-upload :before-upload="beforeUpload" :file-list="files" action="/">
              <a-button>重新选择</a-button>
            </a-upload>
          </div>
        </div>
        <div v-if="step === 2">
          <div style="width:100%;background: #f5f5f5;border-radius: 4px;height:36px; padding:8px 12px">
            <div class="flex_start">
              <img src="../../assets/img/icon_warning.png" style="width:18px;" alt="">
              <div
                style="font-size: 14px;font-weight: 400;text-align: left;color: #333333;line-height: 20px;margin-left:8px;">
                部分导入失败</div>
            </div>
          </div>
          <div
            style=" font-size: 14px;font-weight: 400;text-align: left;color: #333333;line-height: 20px;margin-top:16px">
            {{ message }}
          </div>
        </div>
      </div>
      <div style="margin-top:20px;text-align:center;">
        <a-button @click="onClear" style="margin-right:10px">清除</a-button>
        <a-button ghost type="primary" @click="onSubmit">一键导入</a-button>
      </div>
    </div>
    <div v-if="!flag">
      <badge :pdbt="12" :left="0" text="导入结果" />
      <div class="xu_border" style="margin-top:12px;">
        <div class="result"> 请选择您要上传的文件!</div>
      </div>
      <div style="margin-top:20px;text-align:center;">
        <a-button @click="onClear" style="margin-right:10px">查看名单</a-button>
        <a-button ghost type="primary" @click="onAgain">重新导入</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { docAccept } from '@/utils/options.js'
import badge from '@/components/badge'
import { getOffline } from '@/services/deviceManament'
import { downLoads } from '@/utils/util.js'
import { getTemplateDownload, uploadImg, batchImportant } from '@/services/adminApi'
const BASE_URL = process.env.VUE_APP_API_URL

export default {
  components: { badge },
  data () {
    return {
      docAccept,
      flag: true,
      step: 1,
      BASE_URL,
      confirmLoading: false,
      show: false,
      fileList: [],
      message: '',
      files: [],
      deviceStoreShow: false,
      deviceStoreErrText: '部分文件导入失败'
    }
  },
  created () {
    this.uploadUrl = uploadImg()
  },
  methods: {
    onTemplate () {
      this._getTemplateDownload()
    },
    // 学生名单模板
    async _getTemplateDownload () {
      const res = await getTemplateDownload()
      downLoads('学生名单模板.xlsx', res)
    },
    beforeUpload (file) {
      this.fileList = []
      this.fileList.push(file)
      console.log(file)
    },

    // 重新导入
    onAgain () {
      this.flag = true
    },
    onClear () {
      this.fileList = []
    },
    async onSubmit () {
      if (this.step === 1) {
        if (this.fileList.length === 0) {
          this.$message.newFun('请选择导入文件', 'error', 3)
        } else {
          this.confirmLoading = true
          const formData = new FormData()
          formData.append('file', this.fileList[0])
          const res = await batchImportant(formData)
          const { success, data, msg } = res
          if (success) {
            this.flag = false
            this.confirmLoading = false
            this.$message.newFun('导入成功', 'success', 2)
            this.show = false
          } else {
            this.$message.newFun(res.message, 'error', 2)
          }
        }
      } else {
        this.step = 1
      }
    }
  }
}
</script>

<style lang="less">
.xu_border {
  text-align: center;
  height: 150px;
  background: #ffffff;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  width: 100%;
  img {
    width: 38px;
    height: 40px;
    margin-top: 20px;
  }
  .name {
    height: 17px;
    font-size: 12px;
    font-weight: 400;
    color: #606266;
    line-height: 17px;
    margin: 8px 0 12px;
  }
  .result{
    font-size: 14px;
    line-height: 150px;
    color:#f5222d;
  }
}
.ant-popover-inner {
  width: 230px !important;
}
</style>
